/** * Create by mzq * Description: 深度监测实时监控 * Date: 2024/9/14 14:19 * Update: 2024/9/14
14:19 */

<template>
  <div class="bg">
    <div class="title flex justify-center">深度监测实时监控</div>
    <BlackBorder title="预警管理平台">
      <template #content>
        <div class="flex justify-evenly items-center mt-[0.026rem]">
          <div class="flex" v-for="item in WarningManagementPlatformList" :key="item.id">
            <div>
              <img :src="item.ImgUrl" alt="" />
            </div>
            <div class="flex flex-col justify-center items-start">
              <div class="text-[#D5E4FA] titleName">{{ item.name }}</div>
              <div>
                <CountTo
                  :style="{ color: item.color }"
                  class="Number"
                  :separator="''"
                  :startVal="0"
                  :endVal="item.number"
                ></CountTo>
              </div>
            </div>
          </div>
        </div>

        <!--轮播-->
        <div class="mt-[0.0521rem]">
          <swiper
            v-if="swiperList.length > 0"
            :modules="modules"
            :loop="loop"
            :slides-per-view="5"
            :space-between="2"
            :autoplay="{ delay: 2000, disableOnInteraction: false }"
            :navigation="navigation"
            :pagination="{ clickable: false }"
            :scrollbar="{ draggable: false }"
            class="swiperBox"
            @slideChange="onSlideChange"
          >
            <swiper-slide v-for="item in swiperList" :key="item.id">
              <div class="flex flex-col justify-center items-center">
                <div>
                  <img src="../../../image/man.png" alt="" />
                </div>
                <div>
                  <div>{{ item.name }} {{ item.age }}</div>
                </div>
                <div class="sizeBg">时长:{{ item.monitorTime }}</div>
                <div>{{ item.nowDate }}</div>
              </div>
            </swiper-slide>

            <!--            <div class="swiper-button-prev" @click.stop="prevEl(item, index)" />-->
            <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
            <!--            <div class="swiper-button-next" @click.stop="nextEl" />-->
            <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
          </swiper>
        </div>
      </template>
    </BlackBorder>

    <BlackBorder class="mt-[0.03125rem]" title="24小时预警服务进度图">
      <template #content>
        <div id="category"></div>
      </template>
    </BlackBorder>
  </div>
</template>
<script setup>
import BlackBorder from '@/views/components/BlackBorder.vue'
import { CountTo } from 'vue3-count-to'
import { ref, watch } from 'vue'
import { getImageUrl } from '@/utils/index.js'

import { Swiper, SwiperSlide } from 'swiper/vue'

const loop = ref(true)

const props = defineProps({
  data: Object
})

// 积累人次
const historyMonitorCount = ref(0)
// 今日人次
const todayMonitorCount = ref(0)
// 当月数量
const monthMonitorCount = ref(0)

// 24小时数据
const data24Hour = ref([])

const WarningManagementPlatformList = ref([
  {
    id: 1,
    name: '积累人次',
    number: historyMonitorCount,
    ImgUrl: getImageUrl('right/1.png'),
    color: '#46EDE8'
  },
  {
    id: 2,
    name: '今日人次',
    number: todayMonitorCount,
    ImgUrl: getImageUrl('right/2.png'),
    color: '#FFD642'
  },
  {
    id: 3,
    name: '当月人次',
    number: monthMonitorCount,
    ImgUrl: getImageUrl('right/3.png'),
    color: '#3798FF'
  }
])

// 轮播数据
const swiperList = ref([])

// 引入swiper样式（按需导入）
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/navigation' // 轮播图两边的左右箭头
// import 'swiper/css/scrollbar'  // 轮播图的滚动条， 轮播图里一般不怎么会使用到滚动条，如果有用到的话import导入就行
// 引入swiper核心和所需模块
import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'
import * as echarts from 'echarts'

const navigation = ref({
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev'
})
// 在modules加入要使用的模块
const modules = [Autoplay, Navigation, Scrollbar]
const prevEl = (item, index) => {
  // console.log('上一张' + index + item)
}
const nextEl = () => {
  // console.log('下一张')
}
// 更改当前活动swiper
const onSlideChange = (swiper) => {
  // swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
}

const init = () => {
  let myChart = echarts.init(document.getElementById('category'))
  let option = {
    grid: {
      left: '0',
      right: '0%',
      bottom: '0%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: [
        '00',
        '01',
        '02',
        '03',
        '04',
        '05',
        '06',
        '07',
        '08',
        '09',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
        '20',
        '21',
        '22',
        '23'
      ],
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: 'rgba(255, 255, 255, 0.60)'
        }
      },
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      minInterval: 200,
      type: 'value',
      // y轴（竖直线）
      axisLine: {
        show: false
      },
      // y轴文字
      axisLabel: {
        show: false,
        fontSize: 14,
        color: 'rgba(255, 255, 255, 0.60)'
      },
      // y轴横向 标线
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.16)'
        }
      }
    },
    series: [
      {
        data: data24Hour.value,
        type: 'line',
        lineStyle: {
          color: '#4FF8FF'
        },
        itemStyle: {
          color: '#4FF8FF'
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#4FF8FF'
            },
            {
              offset: 1,
              color: '#00091A'
            }
          ])
        },
        label: {
          color: '#fff',
          show: true
        }
      }
    ]
  }
  myChart.setOption(option, true)

  window.addEventListener('resize', function () {
    myChart.resize()
  })
}

watch(
  () => props.data,
  (val) => {
    historyMonitorCount.value = val.historyMonitorCnt.historyMonitorCount
    todayMonitorCount.value = val.historyMonitorCnt.todayMonitorCount
    monthMonitorCount.value = val.historyMonitorCnt.monthMonitorCount

    data24Hour.value = val.historyMonitorCnt.todayMonitorSeq


    // 获取当前年月日
    const currentDate = new Date()
    const year = currentDate.getFullYear()
    const month = currentDate.getMonth() + 1 // 月份是从 0 开始计数的，因此要加1
    const day = currentDate.getDate()

    let arr = []
    for (let i = 0; i < val.historyMonitorCnt.recentMonitorUser.length; i++) {
      let obj = {}
      obj.name = val.historyMonitorCnt.recentMonitorUser[i].userName
      obj.age = val.historyMonitorCnt.recentMonitorUser[i].age
      obj.monitorTime = val.historyMonitorCnt.recentMonitorUser[i].monitorTime
      obj.nowDate = `${year}.${month}.${day}`
      arr.push(obj)
    }

    swiperList.value = arr

    if (swiperList.value.length > 5) {
      loop.value = true
    } else {
      loop.value = false
    }

    init()
  }
)
</script>

<style scoped lang="scss">
.bg {
  margin-left: 0.078125rem /* 15/192 */;
  width: 2.2604rem /* 434/192 */;
  height: 2.151rem /* 413/192 */;
  background: url('@/image/bg.png') no-repeat;
  background-size: 100% 100%;
  padding-left: 0.0417rem /* 8/192 */;
  padding-right: 0.0417rem /* 8/192 */;

  .title {
    font-family: 'alimamashuheiti';
    color: #4adde4;
    font-size: 0.0729rem /* 14/192 */;
    margin-top: 0.0208rem /* 4/192 */;
    margin-bottom: 0.0625rem /* 12/192 */;
  }

  .Number {
    font-family: 'Digib';
    color: #0ad1c9;
    font-size: 0.09375rem /* 18/192 */;
  }

  .sizeBg {
    padding: 0.026rem /* 5/192 */;
    padding-left: 0.0417rem /* 8/192 */;
    padding-right: 0.0417rem /* 8/192 */;
    background: url('@/image/right/bg1.png') no-repeat;
    background-size: 100% 100%;
  }
}

.titleName{
  font-size: 0.0625rem  /* 12/192 */;
}

#category {
  width: 2.0833rem /* 400/192 */;
  height: 0.8333rem /* 160/192 */;
}
</style>
